<template>
  <div>
    <!-- 面包屑导航 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>数据源</el-breadcrumb-item>
    </el-breadcrumb>

    <!-- 搜索筛选 -->
    <el-form :inline="true" class="user-search">
      <el-form-item label="搜索：">
      </el-form-item>
      <el-form-item label="" v-for="(filter, index) in searchParams.filters" :key="index">
        <el-input size="small" v-model="filter.fieldValue" v-bind:fieldName="filter.fieldName" v-if="filter.showAble"
                  v-bind:fieldValue="filter.fieldValue" v-bind:compare="filter.compare" :disabled="filter.readonly"
                  @keyup.enter.native="search"
                  :placeholder="filter.placeholder" :readonly="filter.readonly" clearable/>
      </el-form-item>
      <el-form-item>
        <el-button size="small" type="primary" icon="el-icon-search" @click="search()">搜索</el-button>
        <el-button size="small" type="primary" icon="el-icon-refresh" @click="handleAdd()" :loading="isSyncing">新增
        </el-button>
      </el-form-item>
    </el-form>

    <!--列表-->
    <el-table size="small" :data="list" highlight-current-row v-loading="loading" border
              element-loading-text="拼命加载中"
              style="width: 100%;" :header-row-style="{width: '100%', color: 'darkorange'}">
      <el-table-column align="center" type="selection">
      </el-table-column>
      <el-table-column sortable prop="dbName" label="数据库名称">
      </el-table-column>
      <el-table-column sortable prop="dbType" label="数据库类型">
        <template slot-scope="scope">
          <span>{{scope.row.dbType | dbType}}</span>
        </template>
      </el-table-column>
      <el-table-column sortable prop="dbAddr" label="IP地址">
      </el-table-column>
      <el-table-column sortable prop="dbPort" label="端口">
      </el-table-column>
      <el-table-column align="center" label="操作">
        <template slot-scope="scope">
          <el-button size="mini" type="primary" icon="el-icon-view" @click="showSchama(scope.$index, scope.row)">查看数据源
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页组件 -->
    <Pagination v-bind:child-msg="pageParams" @callFather="callFather"/>

    <!-- 查看模式-->
    <el-dialog :title="'选择模式'" :visible.sync="schamaDialog.showAble" width="50%" @click='closeDialog()'>
      <el-table size="small" :data="schamaDialog.list" highlight-current-row v-loading="schamaDialog.loading"
                ref="multipleTable"
                element-loading-text="拼命加载中"
                style="width: 100%;" :header-row-style="{width: '100%', color: 'darkorange'}">
        <el-table-column sortable prop="catalog_name" label="数据库名称">
        </el-table-column>
        <el-table-column sortable prop="schema_name" label="模式名称">
        </el-table-column>
        <el-table-column sortable prop="schema_owner" label="所有人">
        </el-table-column>

        <el-table-column align="center" label="操作">
          <template slot-scope="scope">
            <el-button size="mini" type="primary" icon="el-icon-view" @click="showTables(scope.row.schema_name)">打开
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页组件 -->
      <Pagination v-bind:child-msg="schamaDialog.pageParams" @callFather="callSchamaFather"/>
    </el-dialog>


    <!-- 查看表-->
    <el-dialog :title="'选择表'" :visible.sync="tableDialog.showAble" width="50%" @click='closeDialog()'>
      <el-form :inline="true" class="user-search">
        <el-form-item label="搜索：">
        </el-form-item>

        <el-form-item label="表名称">
          <el-input size="small" v-model="tableDialog.searchParams.params.tableName"  clearable/>
        </el-form-item>
        <el-form-item>
          <el-button size="small" type="primary" icon="el-icon-search" @click="showTables()">搜索</el-button>
        </el-form-item>
      </el-form>





      <el-table size="small" :data="tableDialog.list" highlight-current-row v-loading="tableDialog.loading"
                ref="multipleTable"
                element-loading-text="拼命加载中"
                style="width: 100%;" :header-row-style="{width: '100%', color: 'darkorange'}">
        <el-table-column sortable prop="tablename" label="表名">
        </el-table-column>
        <el-table-column sortable prop="schemaname" label="所属模式">
        </el-table-column>
        <el-table-column sortable prop="tableowner" label="所有人">
        </el-table-column>

        <el-table-column align="center" label="操作">
          <template slot-scope="scope">
            <el-button size="mini" type="primary" icon="el-icon-view" @click="apiPage(scope.row)">API接口
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页组件 -->
      <Pagination v-bind:child-msg="tableDialog.pageParams" @callFather="callTableFather"/>
    </el-dialog>


    <el-dialog :title="'新增数据源'" :visible.sync="addFormVisible" @click='addFormVisible = false'>
      <el-form label-width="100px" ref="addForm" :model="addForm" :rules="rules">
        <el-form-item label="数据库名称" prop="dbName">
          <el-input size="small" v-model="addForm.dbName" auto-complete="off" placeholder="请输入数据库名称"/>
        </el-form-item>
        <el-form-item label="数据库类型" prop="dbType">
          <el-select size="small" v-model="addForm.dbType" placeholder="请选择数据库类型" class="userRole"
                     style="width: 100%">
            <el-option :label="item.dbTypeName" :value="item.dbType" v-for="(item, index) in roles" :key="index"/>
          </el-select>
        </el-form-item>
        <el-form-item label="IP地址" prop="dbAddr">
          <el-input size="small" v-model="addForm.dbAddr" auto-complete="off" placeholder="请输入IP地址"/>
        </el-form-item>
        <el-form-item label="端口" prop="dbPort">
          <el-input size="small" type="number" v-model="addForm.dbPort" auto-complete="off" placeholder="请输入端口"/>
        </el-form-item>
        <el-form-item label="登录名称" prop="loginUsername">
          <el-input size="small" v-model="addForm.loginUsername" auto-complete="off" placeholder="请输入登录名称"/>
        </el-form-item>
        <el-form-item label="登录密码" prop="loginPassword">
          <el-input size="small" v-model="addForm.loginPassword" auto-complete="off" placeholder="请输入登录密码"/>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button size="small" @click='addFormVisible = false'>取消</el-button>
        <el-button size="small" type="primary" :loading="loading" class="title" @click="submitForm('addForm')">保存
        </el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>
import {datasourceList, dbTableList, datasourceAdd, dbSchamaList} from "../../../api/baseMG";
import Pagination from '../../../components/Pagination'
import {deptAll} from "../../../api/userMG";
import {err} from "../../../api/cti";

export default {
  data() {
    return {
      list: [],
      isSyncing: false,
      loading: false,
      addFormVisible: false,
      editForm: {},
      addForm: {},
      roles: [
        {dbTypeName: "MySql", dbType: "1"},
        {dbTypeName: "Postgres", dbType: "2"},
        {dbTypeName: "Oracle", dbType: "3"},
      ],
      tableDialog: {
        list: [],
        showAble: false,
        loding: false,
        schama: "",
        pageParams: {
          currentPage: 1,
          pageSize: 10,
          total: 10
        },
        searchParams: {
          page: 1,
          perPage: 10,
          isLock: '',
          params: {}
        }
      },
      schamaDialog: {
        list: [],
        showAble: false,
        loding: false,
        pageParams: {
          currentPage: 1,
          pageSize: 10,
          total: 10
        },
        current: {},
        searchParams: {
          page: 1,
          perPage: 10,
          filters: [
            {
              showAble: true,
              readonly: false,
              placeholder: "请输入队列名称",
              fieldName: "queueId",
              compare: "=",
              fieldValue: null
            }
          ],
          isLock: ''
        }
      },
      // 分页参数
      pageParams: {
        currentPage: 1,
        pageSize: 10,
        total: 10
      },
      searchParams: {
        page: 1,
        perPage: 10,
        filters: [
          {
            showAble: true,
            readonly: false,
            placeholder: "请输入队列名称",
            fieldName: "queueName",
            compare: "like",
            fieldValue: ""
          }
        ],
        isLock: ''
      },
      rules: {
        dbName: [
          {required: true, message: '请输入数据库名称', trigger: 'blur'}
        ],
        dbType: [
          {required: true, message: '请选择数据库类型', trigger: 'blur'}
        ],
        dbAddr: [
          {required: true, message: '请输入IP地址', trigger: 'blur'}
        ],
        dbPort: [
          {required: true, message: '请输入端口', trigger: 'blur'}
        ],
        loginUsername: [
          {required: true, message: '请输入登录名称', trigger: 'blur'}
        ],
        loginPassword: [
          {required: true, message: '请输入登录密码', trigger: 'blur'}
        ]
      }
    }
  },
  created() {
    this.search();
  },
  // 注册组件
  components: {
    Pagination
  },
  methods: {
    closeDialog() {
      this.schamaDialog.showAble = false;
    },
    handleAdd() {
      this.addFormVisible = true;
    },
    submitForm() {
      this.$refs['addForm'].validate(valid => {
        if (valid) {
          datasourceAdd(this.addForm).then(resp => {
            this.addFormVisible = false;
            this.loading = false;
            if (resp.success) {
              this.getList(this.searchParams);
              this.$message({
                type: 'success',
                message: '数据保存成功！'
              })
            } else {
              this.$message({
                type: 'info',
                message: resp.msg
              })
            }
          })
        }
      });

    },
    // 分页插件事件
    callFather(param) {
      this.searchParams.page = param.currentPage;
      this.searchParams.perPage = param.pageSize;
      this.getList(this.searchParams);
    },
    callSchamaFather(param) {
      this.schamaDialog.searchParams.page = param.currentPage;
      this.schamaDialog.searchParams.perPage = param.pageSize;
      this.getSchamaList(this.schamaDialog.searchParams);
    },
    callTableFather(param) {
      this.tableDialog.searchParams.page = param.currentPage;
      this.tableDialog.searchParams.perPage = param.pageSize;
      console.log(param)
      this.showTables(this.tableDialog.schama);
    },
    showSchama(index, row) {
      this.current = row;
      // this.$router.push({path: "/base/seat/index", query: {queueId: row.id}})
      this.schamaDialog.showAble = true;
      this.schamaDialog.searchParams.filters = [
        {
          showAble: true,
          readonly: false,
          placeholder: "请输入队列名称",
          fieldName: "id",
          compare: "=",
          fieldValue: row.id
        }];
      this.getSchamaList();
    },
    getSchamaList() {
      dbSchamaList(this.current, this.schamaDialog.searchParams).then(resp => {
        if(resp.success) {
          console.log(resp)
          this.schamaDialog.list = resp.data.list;
          this.schamaDialog.pageParams.currentPage = resp.data.pageNum;
          this.schamaDialog.pageParams.pageSize = resp.data.pageSize;
          this.schamaDialog.pageParams.total = resp.data.total

        } else {
          this.$message({
            type: 'error',
            message: resp.msg
          })
        }
      })
    },
    search() {
      this.getList(this.searchParams);
    },
    getList(params) {
      datasourceList(params).then(res => {
        if (res.success) {
          if (res.data) {
            this.pageParams.currentPage = res.data.pageNum;
            this.pageParams.pageSize = res.data.pageSize;
            this.pageParams.total = res.data.total;
            this.list = res.data.list;
          }
        } else {
          this.$message({
            type: 'info',
            message: res.msg
          })
        }
      })
    },
    deleteItem(index, row) {
      this.$confirm('确定要删除吗?', '信息', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        pstnDelete(row.id).then(res => {
          if (res.success) {
            this.$message({
              type: 'success',
              message: res.msg
            });
            this.search(this.formInline)
          } else {
            this.$message({
              type: 'info',
              message: res.msg
            })
          }
        })
          .catch(err => {
            this.loading = false;
            this.$message.error('删除失败，请稍后再试！')
          })
      }).catch(err => {
        console.error(err);
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    showTables(schama) {
      this.tableDialog.showAble = true;
      if(schama) {
        this.tableDialog.schama = schama;
      }
      dbTableList({id: this.current.id, schama: this.tableDialog.schama}, this.tableDialog.searchParams).then(resp => {
        if(resp.success) {
          this.tableDialog.list = resp.data.list;
          this.tableDialog.pageParams.currentPage = resp.data.pageNum;
          this.tableDialog.pageParams.pageSize = resp.data.pageSize;
          this.tableDialog.pageParams.total = resp.data.total
        } else {
          this.$message({
            type: 'info',
            message: resp.msg
          })
        }
      })
    },
    apiPage(row) {
      this.$router.push({path: "/database/datasource/designApi", query: {id: this.current.id, schama: row.schemaname, table: row.tablename}})
    }
  }
}
</script>

<style scoped>
.user-search {
  margin-top: 20px;
}
</style>
